<template>
    <div class="layout" id="app">
        <Layout>
            <Layout>
                <Header class="layout-header-bar"></Header>
                <Content>
                    <Row :gutter="20">
                        <Col :span="6">
                            <Card>
                                <p slot="title">选择打印机</p>
                                <div style="margin-bottom: 10px;">
                                    <Select v-model="defaultPrinter">
                                        <Option v-for="(item,index) in printers" :key="index" :value="item.name">{{item.name}} - {{item.status}} </Option>
                                    </Select>
                                </div>
                                <Button long @click="print">打印</Button>
                            </Card>
                        </Col>
                        <Col :span="18">
                            <Card></Card>
                        </Col>
                    </Row>

                </Content>
            </Layout>
        </Layout>
    </div>
</template>
<script>
    import CainiaoPrint from "cainiao-print/src";

    export default {
        data() {
            return {
                cainiao: null,
                defaultPrinter: '',
                printers: []
            };
        },
        mounted() {
            this.cainiao = new CainiaoPrint();
            // 监听打印通知
            this.cainiao.notifyPrintResult(response => {
            });
            // 获取打印机列表
            this.cainiao.getPrinters().then(({defaultPrinter, printers}) => {
                this.printers = printers;
                this.defaultPrinter = defaultPrinter;
            });
        },
        methods: {
            print(){
                console.log(this.getData());
                this.cainiao.print(this.getData()).then((res) => {
                    console.log(res)
                });
            },
            getData(){
                return {
                    'taskID': new Date().getTime() + '',
                    'preview': false,
                    'printer': this.defaultPrinter,
                    'previewType': 'pdf',
                    'firstDocumentNumber': 10,
                    'totalDocumentCount': 100,
                    'documents': [{
                        'documentID': new Date().getTime(),
                        'contents': [{
                            'data': {
                                'code': '775510246404016',
                                'bigWord': '700-EE1 P01',
                                'packagePlace': '长沙中转包 1',
                                'date': '2021-02-02 18:21:00',
                                'receiver': {
                                    "name": '叶锦',
                                    "phone": '13794988412',
                                    "address": '湖南省 岳阳市 岳阳楼区 站前路237号 凯鑫国际金融中心',
                                },
                                'sender':{
                                    "name": '标准二号仓库',
                                    "phone": '0731-85255985',
                                    "address": '湖南省 长沙市 长沙县 他性里爱江山',
                                }
                            },
                            'templateURL': 'http://cloudprint.cainiao.com/template/standard/417205/8',
                        }],
                    }],
                };
            }
        }
    }
</script>
<style scoped>
    .layout {
        height: 100vh;
        width: 100vw;
        border: 1px solid #d7dde4;
        background: #f5f7f9;
        position: relative;
        border-radius: 4px;
        overflow: hidden;
    }

    .layout .ivu-layout {
        height: 100vh;
    }

    .ivu-layout-content {
        margin: 20px;
        background: #f5f7f9;
    }

    .ivu-row {
        height: 100%;
    }

    .ivu-col-span-18 {
        height: 100%;
    }

    .ivu-card {
        height: 100%;
    }
</style>
